<template>
	<view>
		<view style="height: 20rpx;"></view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="bg">
					<view class="display-a" style="padding: 14rpx 22rpx;">
						<image class="act" :src="item.head"></image>
						<view>{{item.nickname}}</view>
						<view class="color_757575 margin-left-auto">{{item.drawTime}}</view>
					</view>
					<view class="name">{{item.hitPrize}}</view>
				</view>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				// 下拉配置项
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				
				list: [],
				
				windowHeight: '',
				
				id: '',
				
			}
		},
		
		onLoad(options) {
			uni.getSystemInfo({
			    success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 24;
			    }
			});
			if (options.id) {
				this.id= options.id;
			}
		},
		
		onShow() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},
		
		methods: {
			
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.getWinningRecord,
					data: {
						activityId: this.id,
						page: scroll.num,
						limit: 10
					}
				});
				if (result.code == 2000) {
					this.mescroll.endByPage(result.data.list.length, result.data.count);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				}
			},
			
		}
	}
</script>

<style lang="scss">
	
	.name {
		padding: 32rpx 0 0 100rpx;
		font-weight: bold;
	}
	
	.act {
		width: 52rpx;
		height: 52rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}
	
	.bg {
		width: 710rpx;
		height: 174rpx;
		background: url('~static/25.png');
		background-repeat: no-repeat;
		background-size: contain;
		margin: 0 20rpx 20rpx;
	}
	
</style>
